<template>
    <div class="login-container">
        <el-form ref="loginRef" :model="loginForm" :rules="rules" class="login-form">
            <h3 class="title">后台管理系统</h3>
            <el-form-item prop="username">
                <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号" @keyup.enter="handleLogin"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter="handleLogin"/>
            </el-form-item>
            <el-form-item style="width:100%;">
                <el-button type="primary" style="width:100%;" @click.prevent="handleLogin">
                    <span>登 录</span>
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup name="login">
import setting from './setting'

const { proxy } = getCurrentInstance();
import store from '@/stores';
const router = useRouter();

/**
 * data
 * */
const rules = setting.rules
const loginForm = ref({
    username: "admin",
    password: "123456"
});

/**
 *  method
 * */
const handleLogin = () => {
    let _ = proxy
    _.$refs.loginRef.validate(async valid => {
        if (!valid) return
        const {data: res} = await _.$H.post(_.$A.login, _.loginForm)
        console.log('handleLogin',res)
        if (res.code == 200) {
            store.userStore.setToken(res.data.token)
            await getMenuList()
            /** 获取菜单*/
            router.push({path: '/home'})
        } else {
            // _.$modal.msgError(res.msg)
        }
    })
}

const getMenuList = async () => {
    let _ = proxy
    const {data: res} = await _.$H.post(_.$A.menu, {})
    store.menuStore.setMenuList(_.$U.handleTree(res.data.menuList));
    console.log('handleTree',_.$U.handleTree(res.data.menuList))
}

</script>

<style lang="less" scoped>
@import "index.less";
</style>
